<template>
  <view class="content">
    <view class="UCenter-bg">
      <view class="user-info">
        <image :src="avatar || '/static/icon/user.png'"
          style="width: 120rpx; height: 120rpx; margin-right: 26rpx;border-radius: 50%;">
        </image>
        <view class="user-info-text" style="flex-grow: 1" @click="toLogin">
          <view class="user-info-text-name">{{ mobile || '登录/注册' }}</view>
          <view class="user-info-text-desc">数码产品发烧友</view>
        </view>
      </view>

      <view class="model-list">
        <view class="model">
          <view class="num">0</view>
          <view class="margin-top-sm">寄件数</view>
        </view>
        <view class="model">
          <view class="num">0</view>
          <view class="margin-top-sm">物品数</view>
        </view>
        <view class="model">
          <view class="num">0</view>
          <view class="margin-top-sm">总金额</view>
        </view>
      </view>
    </view>


    <view class="notice">
      <view class="">关注<text class="text-red">公众号</text>，不错过订单通知，赶紧去关注吧~</view>
      <u-icon name="arrow-right" size="12"></u-icon>
    </view>



    <view class="service-list">
      <view class="service-list-title">我的服务</view>
      <view class="service-list-content">
        <button open-type="contact" class="service-item">
          <image src="/static/icon/contact.png" class="service-item-content-icon"></image>
          <text class="service-item-content-text">联系客服</text>
        </button>

        <button class="service-item" @click="about">
          <image src="/static/icon/about.png" class="service-item-content-icon"></image>
          <text class="service-item-content-text">关于我们</text>
        </button>

      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'

onShareAppMessage(() => {
  return {
    title: '万选回收',
    path: '/pages/tabbar/my'
  }
})

onShareTimeline(() => {
  return {
    title: '万选回收',
  }
})
const mobile = ref('')
const avatar = ref('')

const toLogin = () => {
  if (mobile.value) return;
  uni.navigateTo({
    url: '/pages/login'
  })
}
const about = () => {
  uni.navigateTo({
    url: '/pages/subPages/about'
  })
}

const getUserInfo = () => {
  const userInfo = uni.getStorageSync('userInfo');
  console.log(userInfo, "userInfo");
  if (userInfo) {
    mobile.value = userInfo.mobile;
    avatar.value = userInfo.avatar;
  }
}

onShow(() => {
  getUserInfo()
})

onMounted(() => {
  getUserInfo()
})
</script>

<style lang="scss">
@import '@/index.scss';

.content {
  padding: 30rpx 32rpx;
}

.user-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.user-info-text {
  display: flex;
  flex-direction: column;

  .user-info-text-name {
    font-size: 32rpx;
    font-weight: bold;
  }

  .user-info-text-desc {
    margin-top: 10rpx;
    font-size: 24rpx;
    color: #999;
  }
}


.model-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 60rpx;

  .model {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    font-size: 28rpx;

    .num {
      font-size: 36rpx;
      font-weight: bold;
    }
  }
}

.notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 24rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-top: 40rpx;
  font-size: 24rpx;
  color: #333333;

  .text-red {
    color: #ff0000;
  }
}

.service-list {
  margin-top: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;

  .service-list-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 40rpx;
  }

  .service-list-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 38rpx;

    .service-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0;
      padding: 0;


      .service-item-content-icon {
        width: 64rpx;
        height: 64rpx;
      }

      .service-item-content-text {
        font-size: 24rpx;
        color: #333333;
      }
    }
  }
}
</style>
